<template>
    <split-horizontal>
        <template v-slot:header-p>
            <div class="j-title">
                <span>脱敏指令（v-JDesensitization）</span>
                <div class="j-detail">
                    vue指令一键脱敏，可用内置脱敏方法，也可自定义脱敏配置或函数，支持版本
                    ^0.8.9
                </div>
            </div>
        </template>
        <template v-slot:mid-p>
            <div style="display: flex; padding-bottom: 1rem">
                <div class="content">
                    <div
                        style="
                            margin: auto;
                            padding-right: 2em;
                            display: flex;
                            flex-direction: column;
                        "
                    >
                        <div
                            style="
                                text-align: center;
                                margin-bottom: 1rem;
                                font-weight: bold;
                            "
                        >
                            脱敏配置
                        </div>
                        <j-drop-down-box
                            style="
                                width: 320px;
                                line-height: 1.5em;
                                font-size: 1em;
                            "
                            :value="inputParams.type"
                            :defIndex="defIndex"
                            :selectData="selectData"
                            :closed="false"
                            @selectItem="selectItem"
                        >
                        </j-drop-down-box>
                        <input
                            class="input-content"
                            v-model="inputParams.ch"
                            placeholder="脱敏代替字符"
                            @input="updataConfig"
                        />
                        <template v-if="showInputParams">
                            <input
                                class="input-content"
                                v-model="inputParams.before"
                                placeholder="保留前几位"
                                @input="updataConfig"
                            />
                            <input
                                class="input-content"
                                v-model="inputParams.after"
                                placeholder="保留后几位"
                                @input="updataConfig"
                            />
                            <textarea
                                class="input-content"
                                v-model="inputParams.fn"
                                placeholder="自定义脱敏函数"
                                @change="updataConfig"
                            ></textarea>
                        </template>
                    </div>
                    <div
                        style="
                            margin: auto;
                            padding-left: 2em;
                            border-left: 2px solid grey;
                        "
                    >
                        <span>动态脱敏：</span>
                        <input
                            v-JDesensitization:params="
                                getParams(inputParams.type)
                            "
                            placeholder="输入需要脱敏的字符"
                            :key="'input-' + inputKey"
                            :ref="'input-' + inputKey"
                            class="input-content"
                            v-model="inputVal"
                        />
                        <div>
                            <span>原始数据：</span>
                            <div class="div-content">
                                {{ inputVal }}
                            </div>
                        </div>
                        <div>
                            <span>测试数据：</span>
                            <div
                                v-JDesensitization:params="params"
                                class="div-content"
                                v-show="inputParams.type == 'phone'"
                            >
                                15012345678
                            </div>
                            <div
                                v-JDesensitization:params="params"
                                class="div-content"
                                v-show="inputParams.type == 'idCard'"
                            >
                                330621199909091234
                            </div>
                            <div
                                v-JDesensitization:params="params"
                                class="div-content"
                                v-show="inputParams.type == 'name'"
                            >
                                张三风
                            </div>
                            <div
                                v-JDesensitization:params="params"
                                class="div-content"
                                v-show="inputParams.type == 'email'"
                            >
                                123456@163.com
                            </div>
                            <div
                                v-JDesensitization:params="params"
                                class="div-content"
                                v-show="inputParams.type == '自定义'"
                            >
                                这是一段自定义测试字段
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <j-table :title="tableTitle" :tableData="tableData"> </j-table>
        </template>
        <template v-slot:footer-p>
            <div style="width: 100%" v-if="showCode">
                <pre v-highlight>
                    <code class="vue">
                        <div>{{ code }}</div>
                    </code>
                </pre>
            </div>
        </template>
    </split-horizontal>
</template>
<script>
import { mixinForView } from "@/mixins/index.js";
export default {
    name: "JDesensitizationView",
    components: {},
    mixins: [mixinForView],
    data() {
        return {
            code: "",
            textStyle: {
                borderBottom: "1px dotted skyblue",
                fontSize: "large",
                color: "skyblue",
            },
            toolTipStyle: {
                backgroundColor: "grey",
                color: "skyblue",
                width: "100px",
            },
            defIndex: "drowDownBox",
            showInputParams: false,
            inputParams: {
                type: "phone",
                before: "",
                after: "",
                ch: "*",
                fn: "",
            },
            params: {
                config: {
                    type: "phone",
                    before: "",
                    after: "",
                    ch: "*",
                },
                fn: "",
            },
            showCode: true,
            selectData: [
                {
                    id: "phone",
                    value: "phone",
                },
                {
                    id: "idCard",
                    value: "idCard",
                },
                {
                    id: "name",
                    value: "name",
                },
                {
                    id: "email",
                    value: "email",
                },
                {
                    id: "自定义",
                    value: "自定义",
                },
            ],
            tableData: [],
            inputKey: "input",
            inputVal: "",
        };
    },
    created() {
        this.initCodeContent();
        this.initTableData();
    },
    mounted() {},
    methods: {
        getParams(type) {
            const obj = {
                config: { ...this.params.config, type },
                fn: this.getFn(),
            };
            return obj;
        },
        getFn() {
            let fn = null;
            if (this.inputParams.fn) {
                try {
                    fn = eval(this.inputParams.fn);
                } catch (e) {
                    fn = null;
                }
            }
            return fn;
        },
        updataConfig() {
            this.params.config = {
                type: this.inputParams.type,
                before: this.inputParams.before,
                after: this.inputParams.after,
                ch: this.inputParams.ch,
            };
            this.params.fn = this.getFn();
            this.initCodeContent();
        },
        selectItem(id) {
            this.inputParams.type = id;
            if (id == "自定义") {
                this.showInputParams = true;
            } else {
                this.showInputParams = false;
            }
            this.updataConfig();
        },
        initCodeContent() {
            this.inputKey = Math.ceil(Math.random() * 1000000);
            this.$nextTick(() => {
                const input = this.$refs["input-" + this.inputKey];
                if (input) {
                    input.focus();
                }
            });
            this.showCode = false;
            const obj = {
                config: this.params.config,
                fn: this.inputParams.fn,
            };
            const map = {
                phone: "15012345678",
                idCard: "330621199909091234",
                name: "张三风",
                email: "123456@163.com",
            };
            const testStr =
                map[this.inputParams.type] || "这是一段自定义测试字段";
            const params = JSON.stringify(obj, null, 4)
                .split("\n")
                .map((item, index) => "    ".repeat(index === 0 ? 0 : 3) + item)
                .join("\n")
                .replace(`"${this.inputParams.fn}"`, this.inputParams.fn);
            this.code = `
<div class="content">
    <input
        v-JDesensitization:params="params"
        placeholder="输入需要脱敏的字符"
        class="input-content"
    />
    <div v-JDesensitization:params="params" class="div-content">
        ${testStr}
    </div>
</div>

export default{
    data(){
        return {
            params:${params},

        }
    }
}
            `;
            setTimeout(() => {
                this.showCode = true;
            }, 100);
        },
        initTableData() {
            this.tableData = [
                {
                    parameter: "config",
                    field: "指令配置",
                    type: "Object",
                    describe: "展开查看具体配置参数",
                    children: {
                        title: this.subTableTitle,
                        data: [
                            {
                                parameter: "type",
                                field: "脱敏类型",
                                type: "String",
                                describe:
                                    "内置有：phone、idCard、name、email，优先级第二",
                            },
                            {
                                parameter: "before",
                                field: "保留前几位",
                                type: "String|Number",
                                describe:
                                    "type不为内置类型时生效，字符串保留前几位",
                            },
                            {
                                parameter: "after",
                                field: "保留后几位",
                                type: "String|Number",
                                describe:
                                    "type不为内置类型时生效，字符串保留后几位",
                            },
                            {
                                parameter: "ch",
                                field: "脱敏代替字符",
                                type: "String",
                                describe: "默认为*",
                            },
                        ],
                    },
                },
                {
                    parameter: "fn",
                    field: "自定义脱敏函数",
                    type: "Function",
                    describe:
                        "传入一个自定义脱敏函数，如：(str)=>{return str[0] + '*'.repeat(str.length - 1)};优先级最高",
                },
            ];
        },
    },
};
</script>
<style scoped lang="less">
.title {
    font-size: x-large;
    text-align: left;
    margin-bottom: 1rem;
    .detail {
        font-size: medium;
        color: dimgrey;
        margin-top: 1rem;
    }
}
.content {
    margin: auto auto;
    display: flex;
    flex-direction: row;
    .input-content {
        width: 300px;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        font-size: 16px;
        margin-top: 1em;
    }
    .div-content {
        width: 300px;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        font-size: 16px;
        margin-top: 1em;
        word-break: break-all;
        display: inline-block;
    }
}
.header {
    min-height: 4rem;
    text-align: center;
}
.footer {
    margin-top: 2rem;
    margin-left: 2%;
    width: 95%;
}
</style>
